<template>
  <el-dialog
    v-model="dialogVisible"
    class="user-operation-form"
    :title="opentionType"
    width="600px"
    draggable
    @closed="closeDialog"
  >
    <el-form
      ref="operateFormRef"
      :model="userForm"
      label-width="auto"
      :rules="rules"
      style="max-width: 600px"
      label-position="top"
    >
      <el-form-item label="用户名称" prop="userName">
        <!-- 此处只允许输入英文字母 -->
        <el-input
          v-model="userForm.userName"
          placeholder="请输入英文或字母名称"
          maxlength="20"
          @input="userForm.userName = userForm.userName.replace(/[^a-zA-Z]/g, '')"
        />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="userForm.password" type="password" autocomplete="off" maxlength="20" />
      </el-form-item>
      <el-form-item label="启用" prop="enabled">
        <el-switch v-model="userForm.enabled" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="addOrUpdate">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeMount } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { restHelperInstance } from '@/composables/useGeoHelper'
import type { ISecurity } from 'geoserver-helper/interface'
// 表单ref
const operateFormRef = ref<FormInstance>()
const opentionType = ref('新增')
const dialogVisible = ref(false)
const emptyRoleTemplate: ISecurity.UserInfo = {
  userName: '',
  password: '',
  enabled: true,
}
const userForm = ref<ISecurity.UserInfo>(JSON.parse(JSON.stringify(emptyRoleTemplate)))
let orignUser = reactive<ISecurity.UserInfo>({
  userName: '',
  password: '',
  enabled: true,
})
const rules = reactive<FormRules<typeof emptyRoleTemplate>>({
  userName: [{ required: true, trigger: 'blur' }],
})

// openDialog
const openDialog = (opentionTypeParam?: string) => {
  if (opentionTypeParam) {
    opentionType.value = opentionTypeParam
  }
  dialogVisible.value = true
}
const setOrignUser = (orignRoleParam: ISecurity.UserInfo) => {
  orignUser = orignRoleParam
  const deepCloneData = JSON.parse(JSON.stringify(orignRoleParam))
  userForm.value = deepCloneData
}
const closeDialog = () => {
  userForm.value = JSON.parse(JSON.stringify(emptyRoleTemplate))
  dialogVisible.value = false
}
interface IEmit {
  (e: 'updateUsers'): void
}
const emit = defineEmits<IEmit>()
const addOrUpdate = () => {
  if (!operateFormRef.value) return
  operateFormRef.value.validate((valid) => {
    if (valid) {
      if (opentionType.value == '新增') {
        restHelperInstance
          .addUser({
            user: userForm.value,
          })
          .then(() => {
            ElMessage({
              type: 'success',
              message: '添加成功',
            })
            closeDialog()
            emit('updateUsers')
          })
          .catch(() => {
            ElMessage({
              type: 'error',
              message: '添加失败!',
            })
          })
      } else {
        restHelperInstance
          .modifyUser(orignUser.userName, {
            user: userForm.value,
          })
          .then(() => {
            ElMessage({
              type: 'success',
              message: '修改成功',
            })
            closeDialog()
            emit('updateUsers')
          })
          .catch(() => {
            ElMessage({
              type: 'error',
            })
          })
      }
    }
  })
}

onBeforeMount(() => {})

defineExpose({ openDialog, setOrignUser })
</script>
<style lang="scss">
.user-operation-form {
  .el-dialog__body {
    padding: 20px;
  }
  .el-dialog__footer {
    padding: 20px;
    text-align: center;
  }
}
</style>
